<template>
  <view class="diy_table diy_table_tml" id="forum_table">
    <view
      class="popup_overlay"
      :hidden="userFeedbackHidden"
      @click="hideDiv()"
    ></view>
    <template v-if="$check_action('/forum/table', 'get')">
      <uni-search-bar
        placeholder="搜索标题"
        @confirm="search_"
        @cancel="cancel"
        cancelText="取消"
        @input="input($event, 'title')"
      >
        <uni-icons slot="searchIcon" color="#999999" size="18" type="home" />
      </uni-search-bar>

      <view class="change">
        <uni-data-select
          :localdata="type_list"
          v-model="obj.type"
          @change="push_search_query($event, 'type')"
        >
        </uni-data-select>
        <navigator :url="'/pages/forum/add'" class="button">
          <button style="font-size: 14px">添加</button>
        </navigator>
      </view>
      <uni-table ref="table" border emptyText="暂无更多数据">
        <uni-tr>
          <uni-th align="center">标题</uni-th>
          <uni-th align="center">封面图</uni-th>
          <uni-th align="center">分类</uni-th>
          <uni-th align="center">标签</uni-th>
          <uni-th align="center">创建时间</uni-th>
          <uni-th align="center">更新时间</uni-th>
          <uni-th align="center">操作</uni-th>
        </uni-tr>
        <uni-tr v-for="(o, i) in list" :key="i">
          <uni-td align="center">{{ o.title }}</uni-td>
          <uni-td align="center">
            <image
              style="width: 3rem; height: 3rem"
              :src="$fullImgUrl(o.img)"
              mode="scaleToFill"
            />
          </uni-td>
          <uni-td align="center">{{ o.type }}</uni-td>
          <uni-td align="center">{{ o.tag }}</uni-td>
          <uni-td align="center">{{
            $toTime(o['create_time'], 'yyyy-MM-dd hh:mm:ss')
          }}</uni-td>
          <uni-td align="center">{{
            $toTime(o['update_time'], 'yyyy-MM-dd hh:mm:ss')
          }}</uni-td>
          <uni-td align="center">
            <navigator
              :url="'/pages/forum/edit?forum_id=' + o.forum_id"
              class="answer_link"
            >
              <button type="default" size="mini">详情</button>
            </navigator>

            <button
              class="delete_a_btn"
              @click="delInfo(i)"
              v-show="
                user_group == '管理员' || $check_action('/forum/table', 'del')
              "
            >
              删除
            </button>

            <navigator
              :url="
                '/pages/comment/table?source_table=forum&source_field=' +
                field +
                '&source_id=' +
                o.forum_id
              "
              class="answer_link"
            >
              <button type="default" size="mini">评论</button>
            </navigator>
          </uni-td>
        </uni-tr>
      </uni-table>

      <uni-pagination
        style="padding: 10px"
        show-icon="true"
        :total="count"
        :pageSize="query.size"
        :current="query.page"
        @change="page_change"
      ></uni-pagination>
    </template>
  </view>
</template>

<script>
import mixin from '@/libs/mixins/page.js'

export default {
  mixins: [mixin],
  data() {
    return {
      // 获取数据地址
      url_get_list: '~/api/forum/get_list?like=0',
      url_get_type_list: '~/api/forum_type/get_list',
      url_set: '~/api/forum/set?',
      url_del: '~/api/forum/del',
      // 字段ID
      field: 'forum_id',
      // 查询
      query: {
        size: 10,
        page: 1,
        title: '',
        type: '',
        orderby: 'create_time desc',
        user_id:
          this.$store.state.user.user_group == '管理员'
            ? ''
            : this.$store.state.user.user_id,
      },

      userFeedbackHidden: true, // 默认隐藏
      feedbackContent: '',
      forum_id: 0,
      type_list: [],
    }
  },
  created() {
    // this.get_forum_list();
    this.get_forum_type()
  },
  methods: {
    get_forum_type() {
      let _slef = this
      this.$get(this.url_get_type_list, {}, function (json, status) {
        _slef.type_list = json.result.list.map((item) => {
          return {
            value: item.name,
            text: item.name,
          }
        })
      })
    },
    delInfo(v) {
      let _this = this
      uni.showModal({
        title: '删除',
        content: '此操作将永久删除该文件, 是否继续?',
        success: function (res) {
          if (res.confirm) {
            let list = [v]
            _this.delAll(list)
          } else if (res.cancel) {
          }
        },
      })
    },
    //搜索相关方法
    push_search_query(query, key) {
      this.query[key] = query
      this.search_()
    },
    input(e, key) {
      this.query[key] = e.value
    },
    search_() {
      this.query.page = 1
      this.get_list()
    },
    showDiv(forum_id, reply) {
      // 显示输入弹出框
      this.userFeedbackHidden = false
      this.forum_id = forum_id
      this.feedbackContent = reply
    },
    hideDiv() {
      // 隐藏输入弹出框
      this.userFeedbackHidden = true
      this.forum_id = ''
      this.feedbackContent = ''
    },
    //回复内容提交
    submitFeedback() {
      let _self = this
      if (this.feedbackContent) {
        let form = {
          reply: this.feedbackContent,
        }

        this.$post(
          this.url_set + 'forum_id=' + this.forum_id,
          form,
          function (json, status) {
            //修改列表中的对象属性
            for (var i = 0; i < _self.list.length; i++) {
              let msgObj = _self.list[i]
              if (msgObj.forum_id == _self.forum_id) {
                msgObj.reply = _self.feedbackContent
              }
            }

            _self.hideDiv()
          }
        )
      }
    },
    get_forum_list() {
      let _self = this
      this.$get(this.url_get_forum_list, this.query, function (json, status) {
        _self.list = json.result.list
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.change {
  display: flex;
  align-items: center;

  .button {
    background-color: #0154ba;
    width: 40%;
    display: block;
    line-height: 36px;
    margin: 8px;
    text-align: center;
    color: white;
    border-radius: 5px;
    font-size: 14px;
  }
}

.page_exam {
  padding: 10px;
}

/*弹窗*/
.popup_overlay {
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 1001;
  -moz-opacity: 0.8;
  opacity: 0.8;
  filter: alpha(opacity=88);
}

.popup_content {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 520rpx;
  height: 300rpx;
  margin-left: -270rpx;
  margin-top: -270rpx;
  border: 10px solid white;
  background-color: white;
  z-index: 1002;
  overflow: auto;
}

.popup_title {
  width: 480rpx;
  text-align: left;
  font-size: 32rpx;
}

.popup_textarea_item {
  padding-top: 5rpx;
  height: 80rpx;
  width: 440rpx;
  background-color: #f1f1f1;
  margin-top: 20rpx;
  margin-left: 20rpx;
  padding-top: 25rpx;
}

.popup_textarea {
  width: 410rpx;
  font-size: 26rpx;
  margin-left: 20rpx;
}

.popup_button {
  color: #000000;
}

.buttons {
  text-align: center;
  font-size: 32rpx;
  margin-top: 40rpx;
}
</style>
